<template>
  <transition name="showbox">
    <div class="userinfo"  v-show="showflag">
      <div class="close" @click="close">
        X
      </div>
      <div class="container">
       <el-upload
          class="avatar-uploader"
          :action="myurl"
          :data="{url:'userimage',name:userinfo._id}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar useimage">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <img :src="userinfo.imgurl"  class="useimage"> -->
        <div class="info">
          <div class="tip">姓名:</div>
          <div class="name">{{userinfo.name}}</div>
          <div class="tip">账户:</div>
          <div class="account">{{userinfo.account}}</div>
        </div>
        <div class="out" @click="out">退出登录</div>
      </div>
    </div>
  </transition>
</template>

<script>
import * as myfunc from "../../commom/js/myfunc"
export default {
  data(){
    return{
      showflag:false,
      userinfo:{},
      imageUrl: '',
      myurl:this.serverurl+'file/upload',
    }
  },
  created(){
    this.isshowlogin()
  },
  methods:{
    handleAvatarSuccess(res, file) {
      let value = myfunc.getlocalstorage();
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$http.post(this.serverurl+'user/change',{
        id:value._id,
        type:'imgurl',
        data:file.response.filename
      }).then((myresult)=>{
        value.imgurl = file.response.filename;
        myfunc.setlocalstorage(value)
        this.$emit("imgrefesh", this.imageUrl)
      })
      console.log(file.response)
    },
    isshowlogin(){//根据本地缓存判断用户是否登录过或还是处于未注册状态
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){//本地缓存为空
        return
      }else{
        this.userinfo = value;
        this.imageUrl= this.serverurl+"userimage/"+value.imgurl;
      }
    },
    open(){
        this.showflag = true;
        this.isshowlogin()
    },
    close(){
        this.showflag = false;
    },
    out(){//退出登录
      myfunc.removelocalstorage()//清除缓存
      this.$emit("isshowlogin")
      this.showflag = false;
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.avatar-uploader{
  text-align: center;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.userinfo{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 2rem 1rem;
  overflow-y:scroll;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  z-index: 998;
  #image{
    padding-top: 200px;
  }
  .btn{background-color: indianred;padding: 7px 12px;color: white;}
  &::-webkit-scrollbar {
      width: 0 !important;
  }
  .container{
    width: 36%;
    min-height: 60%;
    background-color: #F5F5F5;
    border-radius: 1.2rem;
    margin: 0 auto;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
    .useimage{
      cursor: pointer;
      display: block;
      width: 10rem;
      height: 10rem;  
      margin: 0 auto;
      border-radius: 50%;
    }
    .info{
      >div{
        font-family: SourceHanSansSC-bold;
        text-align: center;
        margin-bottom: 1rem;
      }
      .tip{
        color: rgba(64, 64, 64, 1);
        font-size: 2rem;     
        font-weight: bold; 
        line-height: 4rem;
      }
      .name{
        color: rgb(64, 64, 64);
        font-size: 1.6rem;

      }
      .account{
        color: rgba(64, 64, 64, 1);
        font-size: 1.6rem; 
      }
    }
    .out{  
      width: 13.3rem;
      height: 3.0rem;
      margin: 2rem auto;
      line-height: 3.0rem;
      border-radius: 1.2rem;
      background-color: rgba(223, 10, 10, 100);
      color: rgba(255, 255, 255, 100);
      font-weight: bold;
      font-size: 1.2rem;
      text-align: center;
      font-family: Roboto;
      margin-top: 10rem;
    }
  }
  .close{
    position: absolute;
    cursor: pointer;
    left: 90%;
    top: 5%;
    transform: translate3d(0,0,0);
    width: 4rem;
    border-radius: 50%;
    text-align: center;
    line-height: 4.2rem;
    height: 4rem;
    font-size: 2rem;
    background-color: #fff;
    color:black;
  }
}
.showbox-enter-active,.showbox-leave-active {
  transition: all 0.8s ease;
}
.showbox-enter
{
  transform: translateY(-100%);
  opacity: 0;
}
.showbox-leave-to{
  transform: translateY(100%);
  opacity: 0;
}
</style>